<div id="session-edit-form" class="card card-plain">
  <div class="close-header" *ngIf="formMode === SessionEditFormMode.ADD">
    <button type="button" class="btn-close" aria-label="Close" (click)="closeEditFormHandler()"></button>
  </div>
  <div class="card-body">
    <div class="row" *ngIf="formMode === SessionEditFormMode.ADD">
      <div class="col-lg-7">
        <div class="row mb-2">
          <div class="col-12 col-sm-3 session-heading-text">
            <h5>Create new</h5>
          </div>
          <div class="col-12 col-sm-9 create-new-dropdown-div">
            <select id="session-type" class="form-control form-select" [ngModel]="model.templateSessionName" (ngModelChange)="triggerModelChange('templateSessionName', $event)">
              <option *ngFor="let templateSession of templateSessions" [ngValue]="templateSession.name">{{ templateSession.name }}</option>
            </select>
            <a type="button" class="btn btn-link" tmRouterLink="/web/instructor/help" [queryParams]="{ questionId: 'sessions', section: 'sessions' }" target="_blank" aria-label="Help for feedback sessions"><i class="fas fa-info-circle"></i></a>
          </div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="row">
          <div class="col-12 col-sm-3 col-lg-1 session-heading-text">
            <h5>Or</h5>
          </div>
          <div class="col-12 col-sm-9 col-lg-11 text-md-start">
            <button id="btn-copy-session" type="button" class="btn btn-info" (click)="copyOthersHandler()">
              <span>Copy from previous feedback sessions</span>
              <div class="padding-left-7px">
                <tm-ajax-loading *ngIf="isCopyOtherSessionLoading"></tm-ajax-loading>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="row" *ngIf="formMode === SessionEditFormMode.EDIT">
      <div class="col-12 text-center text-md-end session-form-buttons">
        <button id="btn-fs-edit" type="button" class="btn btn-primary" (click)="triggerModelChange('isEditable', true)" *ngIf="formMode === SessionEditFormMode.EDIT && !model.isEditable && !model.isSaving"><i class="fas fa-pencil-alt"></i> Edit</button>
        <button id="btn-fs-save" type="button" class="btn btn-primary" (click)="submitFormHandler()" [disabled]="model.isSaving" *ngIf="model.isEditable || model.isSaving"><tm-ajax-loading *ngIf="model.isSaving"></tm-ajax-loading> <i class="fas fa-check"></i> Save</button>
        <button type="button" class="btn btn-primary" ngbTooltip="Discard changes to the feedback session" (click)="cancelHandler()" *ngIf="model.isEditable" [disabled]="model.isSaving"><i class="fas fa-ban"></i> Cancel</button>
        <button id="btn-fs-delete" type="button" class="btn btn-primary" ngbTooltip="Delete the feedback session" (click)="deleteHandler()" [disabled]="model.isSaving"><tm-ajax-loading *ngIf="model.isDeleting"></tm-ajax-loading><i class="fas fa-trash"></i> Delete</button>
        <button id="btn-fs-copy" type="button" class="btn btn-primary" ngbTooltip="Copy this feedback session to other courses" (click)="copyHandler()" [disabled]="model.isSaving"><tm-ajax-loading *ngIf="model.isCopying"></tm-ajax-loading><i class="far fa-copy"></i> Copy</button>
      </div>
    </div>

    <div class="card border-primary margin-top-20px">
      <div class="card-body">
        <div class="row text-center">
          <div class="col-md-2 text-md-end font-bold" [ngClass]="{'col-form-label': formMode === SessionEditFormMode.ADD}">
            <span class="ngb-tooltip-class" ngbTooltip="Course for which the feedback session is for.">Course ID</span>
          </div>
          <div class="col-md-auto text-md-start">
            <div *ngIf="formMode === SessionEditFormMode.ADD">
              <select id="add-course-id" class="form-control form-select" [ngClass]="{'is-invalid': courseCandidates.length === 0}" [ngModel]="model.courseId" (ngModelChange)="courseIdChangeHandler($event)" [disabled]="courseCandidates.length === 0">
                <option *ngFor="let course of courseCandidates" [ngValue]="course.courseId">{{ course.courseId }}</option>
              </select>
              <div class="invalid-feedback" *ngIf="courseCandidates.length === 0">
                There is no un-archived course.
              </div>
            </div>
            <div id="edit-course-id" *ngIf="formMode === SessionEditFormMode.EDIT"> {{ model.courseId }} </div>
          </div>
        </div>
        <br/>
        <div class="row text-center">
          <div class="col-md-2 text-md-end font-bold" [ngClass]="{'col-form-label': formMode === SessionEditFormMode.ADD}">
            Time Zone
          </div>
          <div id="time-zone" class="col-md-3 text-md-start" [ngClass]="{'col-form-label': formMode === SessionEditFormMode.ADD}">
            <span class="ngb-tooltip-class" ngbTooltip="To change this, edit the course settings. TEAMMATES automatically adjusts to match the current time offset in your area, including clock changes due to daylight saving time.">{{ model.timeZone }}</span>
          </div>
        </div>
        <br/>
        <div class="row text-center">
          <div class="col-md-2 text-md-end font-bold">
            Course Name
          </div>
          <div id="course-name" class="col-md-10 text-md-start">
            {{ model.courseName }}
          </div>
        </div>
        <br/>
        <div class="row text-center">
          <div class="col-md-2 text-md-end font-bold">
            <span *ngIf="formMode === SessionEditFormMode.ADD" class="ngb-tooltip-class" ngbTooltip="Enter the name of the feedback session e.g. Feedback Session 1.">Session Name*</span>
            <span *ngIf="formMode !== SessionEditFormMode.ADD">Session Name</span>
          </div>
          <div class="col-md-10 text-md-start">
            <div *ngIf="formMode === SessionEditFormMode.ADD">
              <input id="add-session-name" type="text" class="form-control" [ngModel]="model.feedbackSessionName" (ngModelChange)="triggerModelChange('feedbackSessionName', $event)" placeholder="e.g. Feedback for Project Presentation 1" maxlength="64" required #sessionName="ngModel" />
              <div [hidden]="sessionName.valid || (sessionName.pristine && sessionName.untouched)" class="invalid-field">
                <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                The field Session Name should not be empty.
              </div>
              <div>
                {{FEEDBACK_SESSION_NAME_MAX_LENGTH - model.feedbackSessionName.length}} characters left
              </div>
            </div>
            <div id="edit-session-name" *ngIf="formMode === SessionEditFormMode.EDIT"> {{ model.feedbackSessionName }} </div>
          </div>
        </div>
        <br/>
        <div class="row text-center">
          <div class="col-md-2 text-md-end font-bold">
            <span class="ngb-tooltip-class" ngbTooltip="Will be displayed at the top of the page when users respond to the session.">Instructions</span>
          </div>
          <div class="col-md-10 text-md-start">
            <tm-rich-text-editor id="instructions" [richText]="model.instructions" (richTextChange)="triggerModelChange('instructions', $event)" [isDisabled]="!model.isEditable" [hasCharacterLimit]="true"></tm-rich-text-editor>
          </div>
        </div>
        <br/>
        <div class="row text-center" *ngIf="formMode === SessionEditFormMode.EDIT">
          <div class="col-md-2 text-md-end font-bold">
            Submission Status
          </div>
          <div id="submission-status" class="col-md-4 text-md-start">
            {{ model.submissionStatus | submissionStatusName }}
          </div>
          <div class="col-md-2 text-md-end font-bold mt-3 mt-md-0">
            Published Status
          </div>
          <div id="published-status" class="col-md-4 text-md-start">
            {{ model.publishStatus | publishStatusName }}
          </div>
        </div>
      </div>
    </div>

    <div class="card border-primary margin-top-20px">
      <div class="card-body">
        <div class="row text-center">
          <div class="col-md-4">
            <div class="col-12 text-md-start">
              <div>
                <label class="ngb-tooltip-class label-control font-bold" ngbTooltip="Users can start submitting responses.">
                  Submission opening time
                </label>
              </div>
            </div>
            <div class="row text-center align-items-center">
              <div id="submission-start-date" class="col-md-7 col-xs-center">
                <tm-datepicker [isDisabled]="!model.isEditable" (dateChangeCallback)="triggerSubmissionOpeningDateModelChange('submissionStartDate', $event)"
                               [minDate]="minDateForSubmissionStart" [maxDate]="maxDateForSubmissionStart"
                               [date]="model.submissionStartDate"></tm-datepicker>
              </div>
              <div class="col-md-5">
                <tm-timepicker id="submission-start-time" [isDisabled]="!model.isEditable" (timeChange)="triggerSubmissionOpeningTimeModelChange('submissionStartTime', $event)"
                               [minDate]="minDateForSubmissionStart" [maxDate]="maxDateForSubmissionStart"
                               [date]="model.submissionStartDate"
                               [minTime]="minTimeForSubmissionStart" [maxTime]="maxTimeForSubmissionStart"
                               [time]="model.submissionStartTime"></tm-timepicker>
              </div>
            </div>
          </div>
          <div class="col-md-4 border-left-gray">
            <div class="row text-center">
              <div class="col-12 text-md-start ms-md-2">
                <label class="ngb-tooltip-class label-control font-bold" ngbTooltip="No more submissions from users.">
                  Submission closing time
                </label>
              </div>
            </div>
            <div class="row align-items-center">
              <div id="submission-end-date" class="col-md-7 col-xs-center">
                <tm-datepicker [isDisabled]="!model.isEditable" (dateChangeCallback)="triggerModelChange('submissionEndDate', $event)"
                               [minDate]="minDateForSubmissionEnd" [maxDate]="maxDateForSubmissionEnd"
                               [date]="model.submissionEndDate"></tm-datepicker>
              </div>
              <div class="col-md-5">
                <tm-timepicker id="submission-end-time" [isDisabled]="!model.isEditable" (timeChange)="triggerModelChange('submissionEndTime', $event)"
                               [minDate]="minDateForSubmissionEnd" [maxDate]="maxDateForSubmissionEnd"
                               [date]="model.submissionEndDate"
                               [minTime]="minTimeForSubmissionEnd" [maxTime]="maxTimeForSubmissionEnd"
                               [time]="model.submissionEndTime"></tm-timepicker>
              </div>
            </div>
          </div>
          <div class="col-md-4 border-left-gray">
            <div class="row text-center">
              <div class="col-12 text-md-start ms-md-2">
                <label for="grace-period" class="ngb-tooltip-class control-label font-bold" ngbTooltip="Amount of time the system will continue accepting submissions after the specified deadline.">
                  Grace period
                </label>
              </div>
            </div>
            <div class="row text-center">
              <div class="col-12">
                <select id="grace-period" class="form-control form-select" [ngModel]="model.gracePeriod" (ngModelChange)="triggerModelChange('gracePeriod', $event)" [disabled]="!model.isEditable">
                  <option *ngFor="let graceMinute of [0, 5, 10, 15, 20, 25, 30]" [ngValue]="graceMinute">{{ graceMinute + ' min'}}</option>
                </select>
              </div>
            </div>
            <div class="row">
              <a class="ps-3 pt-2"
                *ngIf="formMode !== SessionEditFormMode.ADD"
                tmRouterLink="/web/instructor/sessions/individual-extension"
                [queryParams]="{ courseid: model.courseId, fsname: model.feedbackSessionName, preselectnonsubmitters: false }">
                Individual Deadline Extensions
                <i class="fas fa-edit"></i>
              </a>
              <a class="ps-3 pt-2 disabled-link ngb-tooltip-class"
                *ngIf="formMode === SessionEditFormMode.ADD"
                ngbTooltip="You must save the new session before setting individual deadline extensions">
                Individual Deadline Extensions
                <i class="fas fa-edit"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div *ngIf="!model.hasVisibleSettingsPanelExpanded" class="margin-top-20px">
      <span class="text-muted">Session is visible at submission opening time, responses are only visible when you publish the results.</span>
      <button id="btn-change-visibility" type="button" class="btn btn-link" (click)="triggerModelChange('hasVisibleSettingsPanelExpanded', true)" [disabled]="!model.isEditable">[Change]</button>
    </div>
    <div class="card border-primary margin-top-20px" *ngIf="model.hasVisibleSettingsPanelExpanded" @collapseAnim>
      <div class="card-body">
        <div class="row align-items-start">
          <div class="col-md-6 text-center text-md-start">
            <div class="row ms-md-1">
              <div class="col-12">
                <label class="ngb-tooltip-class label-control font-bold" ngbTooltip="Session can be visible before it is open for submissions so that users can preview the questions.">Make session visible </label>
              </div>
            </div>
            <div class="row mt-md-2 ms-md-1">
              <div class="col-md-2 mt-md-1">
                <div class="form-check">
                  <label class="form-check-label">
                    <input id="session-visibility-custom" class="form-check-input" type="radio" name="sessionVisibleRadio" [value]="SessionVisibleSetting.CUSTOM" [ngModel]="model.sessionVisibleSetting" (ngModelChange)="triggerModelChange('sessionVisibleSetting', $event)" [disabled]="!model.isEditable">
                    At
                  </label>
                </div>
              </div>
              <div id="session-visibility-date" class="col-md-6">
                <tm-datepicker [isDisabled]="model.sessionVisibleSetting !== SessionVisibleSetting.CUSTOM || !model.isEditable"
                               (dateChangeCallback)="triggerModelChange('customSessionVisibleDate', $event)"
                               [minDate]="minDateForSessionVisible" [maxDate]="maxDateForSessionVisible"
                               [date]="model.customSessionVisibleDate"></tm-datepicker>
              </div>
              <div class="col-md-4">
                <tm-timepicker id="session-visibility-time" [isDisabled]="model.sessionVisibleSetting !== SessionVisibleSetting.CUSTOM || !model.isEditable" (timeChange)="triggerModelChange('customSessionVisibleTime', $event)"
                               [minDate]="minDateForSessionVisible" [maxDate]="maxDateForSessionVisible"
                               [date]="model.customSessionVisibleDate"
                               [minTime]="minTimeForSessionVisible" [maxTime]="maxTimeForSessionVisible"
                               [time]="model.customSessionVisibleTime" ></tm-timepicker>
              </div>
            </div>
            <div class="row mt-md-1 ms-md-3">
              <div class="col-12 form-check">
                <label class="form-check-label">
                  <input id="session-visibility-at-open" class="form-check-input" type="radio" name="sessionVisibleRadio" [value]="SessionVisibleSetting.AT_OPEN" [ngModel]="model.sessionVisibleSetting" (ngModelChange)="triggerModelChange('sessionVisibleSetting', $event)" [disabled]="!model.isEditable">
                  Submission opening time
                </label>
              </div>
            </div>
          </div>
          <div class="col-md-6 sessionVisibleRadio border-left-gray text-center text-md-start">
            <div class="row ms-md-1">
              <div class="col-12">
                <label class="ngb-tooltip-class label-control font-bold" ngbTooltip="Make responses for the feedback session visible to designated recipients.">Make response visible </label>
              </div>
            </div>
            <div class="row mt-md-2 ms-md-1">
                <div class="col-md-2 mt-md-1">
                  <div class="form-check">
                    <label class="form-check-label">
                      <input id="response-visibility-custom" class="form-check-input" type="radio" name="responseVisibleRadio" [value]="ResponseVisibleSetting.CUSTOM" [ngModel]="model.responseVisibleSetting" (ngModelChange)="triggerModelChange('responseVisibleSetting', $event)" [disabled]="!model.isEditable"/>
                      At
                    </label>
                  </div>
                </div>
                <div id="response-visibility-date" class="col-md-6">
                  <tm-datepicker [isDisabled]="model.responseVisibleSetting !== ResponseVisibleSetting.CUSTOM || !model.isEditable"
                                 (dateChangeCallback)="triggerModelChange('customResponseVisibleDate', $event)"
                                 [minDate]="minDateForResponseVisible" [date]="model.customResponseVisibleDate"></tm-datepicker>
                </div>
                <div class="col-md-4">
                  <tm-timepicker id="response-visibility-time" [isDisabled]="model.responseVisibleSetting !== ResponseVisibleSetting.CUSTOM || !model.isEditable" (timeChange)="triggerModelChange('customResponseVisibleTime', $event)"
                                 [minDate]="minDateForResponseVisible" [date]="model.customResponseVisibleDate"
                                 [minTime]="minTimeForResponseVisible" [time]="model.customResponseVisibleTime" ></tm-timepicker>
                </div>
            </div>
            <div class="row mt-md-2 ms-md-1">
              <div class="col-12">
                <div class="form-check">
                  <label class="ngb-tooltip-class form-check-label" ngbTooltip="Same time as when the session becomes visible to users.">
                    <input id="response-visibility-immediately" class="form-check-input" type="radio" name="responseVisibleRadio" [value]="ResponseVisibleSetting.AT_VISIBLE" [ngModel]="model.responseVisibleSetting" (ngModelChange)="triggerModelChange('responseVisibleSetting', $event)" [disabled]="!model.isEditable">
                    Immediately
                  </label>
                </div>
              </div>
            </div>
            <div class="row mt-md-2 ms-md-1">
              <div class="col-12">
                <div class="form-check">
                  <label class="ngb-tooltip-class form-check-label" ngbTooltip="Remember to manually publish the responses for this session later on.">
                    <input id="response-visibility-manually" class="form-check-input" type="radio" name="responseVisibleRadio" [value]="ResponseVisibleSetting.LATER" [ngModel]="model.responseVisibleSetting" (ngModelChange)="triggerModelChange('responseVisibleSetting', $event)" [disabled]="!model.isEditable">
                    Not now (publish manually)
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="!model.hasEmailSettingsPanelExpanded">
      <span class="text-muted">Emails are sent when session opens (within 15 minutes), 24 hrs before session closes and when results are published.</span>
      <button id="btn-change-email" type="button" class="btn btn-link" (click)="triggerModelChange('hasEmailSettingsPanelExpanded', true)" [disabled]="!model.isEditable">[Change]</button>
    </div>
    <div class="card border-primary margin-top-20px" *ngIf="model.hasEmailSettingsPanelExpanded" @collapseAnim>
      <div class="card-body">
        <div class="col-12 font-bold">
          Send emails for
        </div>
        <div class="row ms-md-1 mt-md-3">
          <div class="col-md-4">
            <div class="form-check form-check-inline">
              <label class="ngb-tooltip-class form-check-label" ngbTooltip="Notify students when the session is open for submission.">
                <input id="email-opening" class="form-check-input" type="checkbox" checked disabled>Session opened reminder
              </label>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-check form-check-inline">
              <label class="ngb-tooltip-class form-check-label" ngbTooltip="Remind students to submit 24 hours before the end of the session.">
                <input id="email-closing" class="form-check-input" type="checkbox" [ngModel]="model.isClosingSoonEmailEnabled" (ngModelChange)="triggerModelChange('isClosingSoonEmailEnabled', $event)" [disabled]="!model.isEditable"> Session closing soon reminder
              </label>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-check form-check-inline">
              <label class="ngb-tooltip-class form-check-label" ngbTooltip="Notify students when the session results is published.">
                <input id="email-published" class="form-check-input" type="checkbox" [ngModel]="model.isPublishedEmailEnabled" (ngModelChange)="triggerModelChange('isPublishedEmailEnabled', $event)" [disabled]="!model.isEditable"> Results published announcement
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row margin-top-20px">
      <div class="col-12 text-center">
        <span class="loader"></span>
        <div *ngIf="formMode === SessionEditFormMode.ADD">
          <button id="btn-create-session" type="button" class="btn btn-primary" [disabled]="courseCandidates.length === 0 || model.isSaving || !model.feedbackSessionName" (click)="submitFormHandler()">
            <tm-ajax-loading *ngIf="model.isSaving"></tm-ajax-loading>Create Feedback Session
          </button>
          <p class="text-danger margin-top-20px" *ngIf="courseCandidates.length === 0"><b>You need to have an active(unarchived) course to create a session!</b></p>
        </div>
        <div *ngIf="formMode === SessionEditFormMode.EDIT">
          <button type="button" class="btn btn-success" [disabled]="model.isSaving || !model.isEditable" *ngIf="formMode === SessionEditFormMode.EDIT" (click)="submitFormHandler()">
            <tm-ajax-loading *ngIf="model.isSaving"></tm-ajax-loading>Save Changes
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
